<!--
 * @Author: hu_binbin
 * @Date: 2021-08-20 09:45:41
 * @LastEditTime: 2021-08-20 17:39:36
 * @Description: 缺陷隐患列表
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
			<template slot="header_icon">
                <van-image class="imgSize" width="34" height="47" @click="rfidBtn" :src="icon.rfid" />
                <van-image class="imgSize" width="34" height="47" @click="scanBtn" :src="icon.scan" />
			</template>
		</Theader>
        <div style="margin-top: 3.5rem;">
            <van-tabs v-model="active" color="#0EB295" title-active-color="#0EB295" animated swipeable>
                <van-tab title="缺陷">
					<div>
						<!-- 搜索区域 -->
						<div class="search_header center_center">
							<van-search v-model.trim="taskDefectName" clearable @input="focusDefect" background="#F5F6FA" placeholder="输入缺陷设备">
							</van-search> 
							<van-image class="imgSize" width="23" height="23" @click="showDefectScreen=true" :src="icon.screen" />
						</div>

						<!-- 列表区域 -->
						<div class="doc-wrapper">
							<van-pull-refresh v-model="refreshingDefect" @refresh="onRefreshDefect">
								<van-list
								offset="0"
								v-model="loadingDefect"
								:finished="finishedDefect"
								finished-text="没有更多了"
								@load="onLoadDefect"
								>
									<div class="tab-item" @click="gotoDefectDetail" v-for="(item,index) in showDefectList" :key="index">
										<div class="tab-icon">
										<div :style="bgColor(index)"  class="box3">{{index | defectGrade}}</div>
										</div>
										<div class="tab-title">
											<span>缺陷登记</span>
											<label>工业园线243断路器</label>
										</div>
										<div class="tab-per tab-per-flex">
											<div class="flex-center">
												<van-icon size="18" name="user-circle-o" />
												<span style="margin-left: 5px;">登记人：</span>
												<label>巡视人、巡视人</label>
											</div>
										</div>
										<div class="tab-time">
											<div class="time-t">
												<van-icon size="18" name="underway-o" />
												<span>登记时间：</span>
											</div>
											<div class="time-cont">2020/06/09 09:21</div>
											<div class="time-it">
												<van-button class="time-b" plain 
											:color="textColor(index)" type="primary" size="mini">{{index | defectDealSta}}</van-button>
											</div>
										</div>
									</div>
								</van-list>
							</van-pull-refresh>
						</div>
					</div>
                </van-tab>
                <van-tab title="隐患">
                    <div>
						<!-- 搜索区域 -->
						<div class="search_header center_center">
							<van-search v-model.trim="taskDangerName" clearable @input="focusDanger" background="#F5F6FA" placeholder="输入隐患设备">
							</van-search> 
							<van-image class="imgSize" width="23" height="23" @click="showDangerScreen=true" :src="icon.screen" />
						</div>

						<!-- 列表区域 -->
						<div class="doc-wrapper">
							<van-pull-refresh v-model="refreshingDanger" @refresh="onRefreshDanger">
								<van-list
								offset="0"
								v-model="loadingDanger"
								:finished="finishedDanger"
								finished-text="没有更多了"
								@load="onLoadDanger"
								>
								
									<div class="tab-item" @click="gotoDangerDetail" v-for="(item,index) in showDangerList" :key="index">
										<div class="tab-icon">
										<div :style="bgColor(index)"  class="box3">{{index | dangerGrade}}</div>
										</div>
										<div class="tab-title">
											<span>隐患登记</span>
											<label>工业园线243断路器</label>
										</div>
										<div class="tab-per tab-per-flex">
											<div class="flex-center">
												<van-icon size="18" name="user-circle-o" />
												<span style="margin-left: 5px;">登记人：</span>
												<label>巡视人、巡视人</label>
											</div>
											<!-- <div class="flex-center">
												<span style="color:#FB716D">即将到期</span>
												<van-icon style="margin-left: 5px;" size="18" name="question-o" />
											</div> -->
										</div>
										<div class="tab-time">
											<div class="time-t">
												<van-icon size="18" name="underway-o" />
												<span>登记时间：</span>
											</div>
											<div class="time-cont">2020/06/09 09:21</div>
											<div class="time-it">
												<van-button class="time-b" plain 
											:color="textColor(index)" type="primary" size="mini">{{index | dangerDealSta}}</van-button>
											</div>
										</div>
									</div>
								</van-list>
							</van-pull-refresh>
						</div>
					</div>
                </van-tab>
            </van-tabs>
        </div>
		
		<van-popup
		@close="showDefectScreen=false"
		v-model="showDefectScreen"
		closeable
		get-container="#dangerList"
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<defectScreen></defectScreen>
		</van-popup>
		<van-popup
		@close="showDangerScreen=false"
		v-model="showDangerScreen"
		closeable
		get-container="#dangerList"
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<dangerScreen></dangerScreen>
		</van-popup>
	</article>
</template>
<script>
	import Theader from "../component/header"
	import dangerScreen from "../component/dangerScreen.vue"
	import defectScreen from "../component/defectScreen.vue"
	export default {
		name: "defectDangerList",
		components:{
			Theader,
            dangerScreen,
            defectScreen
		},
		data() {
			return {
				title: "缺陷隐患查询",
				icon: {
					rfid:require('../../../../assets/tour/icon-rfid.png'),
					scan:require('../../../../assets/tour/icon-scan.png'),
					screen:require('../../../../assets/tour/icon-screen.png'),
					add:require('../../../../assets/tour/icon-add.png'),
				},
				showDefectScreen:false,
				showDangerScreen:false,
                active: 0,
				showTaskList:[
					{},{}
                ],
				
				loadingDefect:false,
				finishedDefect: false,
				refreshingDefect:false,

				loadingDanger:false,
				finishedDanger: false,
				refreshingDanger:false,
				showDefectList:[
					{},{}
				],
				showDangerList:[
					{},{}
				],
				taskDefectName: "",//缺陷名称
				taskDangerName: "",//隐患名称
			}
		},
		computed: {
            bgColor() {
                return function(index) {
                    var color = "#18B49B;"
                    if(index == 0) {
                        color = "#FAA551;";
                    }else if(index == 1) {
                        color = "#FA524D;";
                    }
                    return {
                        "background":color
                    }
                }
            },
            textColor() {
                return function(index) {
                    var color = "#18B49B"
                    if(index == 0) {
                        color = "#FB7874";
                    }
                    return color
                }
            }
		},
		methods: {
			onRefreshDefect() {

			},
			focusDefect() {

			},
			onLoadDefect() {
				
			},

			onRefreshDanger() {

			},
			focusDanger() {

			},
			onLoadDanger() {
				
			},
            rfidBtn() {

            },
            scanBtn() {
                
			},
			/**
			* @description: 跳转隐患详情页面
			* @param {*}
			* @return {*}
			*/
			gotoDangerDetail() {
				this.$router.push({
					name: "newDangerDetail",
				})
			},
			/**
			* @description: 跳转隐患详情页面
			* @param {*}
			* @return {*}
			*/
			gotoDefectDetail() {
				this.$router.push({
					name: "newDefectDetail",
				})
			},
		},
		watch: {
			
        },
        filters:{
            //隐患处理状态
            dangerDealSta(i) {
                var name = '未处理'
                if(i == 1){
                    name = '已处理'
                }
                return name;
            },
            //隐患等级
            dangerGrade(i) {
                var name = '一般隐患'
                if(i == 0){
                    name = '严重隐患'
                }else if(i == 1) {
                    name = '危急隐患'
                }
                return name;
			},
			//缺陷处理状态
            defectDealSta(i) {
                var name = '未消除'
                if(i == 1){
                    name = '已消除'
                }
                return name;
            },
            //缺陷等级
            defectGrade(i) {
                var name = '一般缺陷'
                if(i == 0){
                    name = '严重缺陷'
                }else if(i == 1) {
                    name = '危急缺陷'
                }
                return name;
			}
        },
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
	.search_header{
		margin-right: 0.7rem;
	}
	.search_header /deep/ .van-search{
		flex:1;
	}
	.search_header /deep/ .van-search__content{
		background: #fff;
		border-radius: 0.7rem;
	}

	.doc-wrapper{
		overflow-y: auto;
		height: calc(100% - 212px);
		margin: 0.6rem;
	}
    .tab-item{
        padding: 0.7rem;
		background: #fff;
		position: relative;
		overflow: hidden;
		border-radius: 0.7rem;
        margin-bottom: 0.7rem;
	}
    .tab-icon{
		display: flex;
		position: absolute;
		right: -7%;
		top: 9%;
		transform: rotate(45deg);
	}
    .box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: #18B49B;
		color: #fff;
	}
    .tab-title{
		font-size: 15px;
		font-weight: bold;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
		color:#0EB295;
		margin-right: 10px;
	}
	.tab-sub{
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #999;
	}
	.tab-per,.tab-time{
        display: flex;
        align-items: center;
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
        /* justify-content:space-between; */
	}
	.tab-per-flex{
		display: flex;
		margin-top: 0.7rem;
		justify-content: space-between;
	}
    .time-t{
        display: flex;
        width: 30%;
		justify-content: space-between;
    }
    .time-cont{
        width: 40%;
    }
    .time-it{
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
	.time-b{
       width: 4.5rem; 
       font-size: 12px;
    }
	.flex-center{
		display: flex;
		align-items: center;
	}
</style>
